<template>
	<z-paging ref="paging" @query="queryList" v-model="participationList"
	lower-threshold="300"
	show-loading-more-when-reload
	empty-view-text="暂无参与记录噢~"
	>
	<view class="container">
		<view class="participation-list">
			<view v-for="item in participationList" 
				  :key="item.id" 
				  class="participation-item"
				  @click="item.activity.status !== 'this_activity_is_over' ? goToDetail(item.activity.id) : null">
				<image :src="getCoverImage(item.activity.cover_image)" 
					   mode="aspectFill" 
					   class="activity-img"></image>
				<view class="info">
					<text class="title">{{item.activity.title}}</text>
					<text class="description">{{item.activity.description}}</text>
					<text class="status" :class="getStatusClass(item.activity.status)">
						{{ getStatusText(item.activity.status) }}
					</text>
					<text v-if="item.activity.status === 'this_activity_is_over'" class="info-message">
						此活动你已经参与过了，无法再次参与。
					</text>
				</view>
			</view>
		</view>
	
	</view>
	</z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { api } from '@/utils/request'

const participationList = ref([])
let paging = ref(null)
const queryList = async (pageNo, pageSize) => {
	console.log("pageNo", pageNo, "pageSize", pageSize);
	await getParticipationList(pageNo, pageSize)
}
const getParticipationList = async (pageNo, pageSize) => {
	try {
		const res = await api.request({
			url: '/api/participation/list/',
			method: 'GET',
			data: {
				pageNo,
				pageSize
			}
		})
		
		if (res.code === 200) {
			paging.value.complete(res.data)
			// participationList.value = res.data
		}
	} catch (e) {
		console.error(e)
		uni.showToast({
			title: '获取参与记录失败',
			icon: 'none'
		})
	}
}

// 获取状态文本
const getStatusText = (status) => {
	if (status === 'this_activity_is_over') {
		return '活动已结束'
	}
	return '进行中'
}

// 获取状态样式
const getStatusClass = (status) => {
	return status === 'this_activity_is_over' ? 'ended' : 'ongoing'
}

// 获取封面图片地址
const getCoverImage = (coverImage) => {
	if (!coverImage) return '/static/default.png'
	return coverImage.startsWith('http') ? coverImage : api.BASE_URL + coverImage
}

// 跳转到活动详情
const goToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/activity/detail?id=${id}`
	})
}


</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	
	.participation-list {
		.participation-item {
			display: flex;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
			
			.activity-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
				background: #f5f5f5;
			}
			
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.description {
					font-size: 28rpx;
					color: #666;
					margin: 10rpx 0;
				}
				
				.status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					display: inline-block;
					width: fit-content;
					
					&.ended {
						color: #f5222d; // 红色
					}
					
					&.ongoing {
						color: #52c41a; // 绿色
					}
				}
				
				.info-message {
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
	}
	
	
}
</style> 